<template>
<div class="iconList">
    <div class="iconItem">
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-rili"></use>
        </svg>
        <span>recommand</span>
    </div>
    <div class="iconItem">
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-liebiao"></use>
        </svg>
        <span>FM</span>
    </div>
    <div class="iconItem">
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-liebiao2"></use>
        </svg>
        <span>music list</span>
    </div>
    <div class="iconItem">
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-paihangbang"></use>
        </svg>
        <span>demo</span>
    </div>
</div>
</template>

<script>
export default {

}
</script>
<style lang="less" scoped>
.iconList {
    display: flex;
    justify-content: space-between;
    padding: 0.4rem;
    .iconItem{
        display: flex;
        flex-direction: column;
        align-items: center;//垂直居中
        .icon{
            width: 0.7rem;
            height: 0.7rem;
            display: block;
        }
    }
}
</style>